<template>
  <view class="main">
    <view class="search-box">
      <van-search
        v-model="query.search"
        placeholder="搜索"
        shape="round"
        @search="search"
      />
    </view>
    <view class="content p-30">
      <view v-if="searchType != 1">
        <view
          class="result-item dispaly-center"
          v-for="(item, index) in dataList"
          :key="index"
          @click="$goUrl(`/pages/index/pages/groupDetail?id=${item.id}`)"
        >
          <view class="cover">
            <image :src="item.icon" mode="aspectFill" />
          </view>
          <view class="result-right">
            <view class="title">{{ item.name }}</view>
            <view class="more dispaly-just-between">
              <view class="nummer">群人数{{ item.memberNum }}</view>
              <image src="/static/icon/wex.svg" mode="aspectFill" />
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <view
          class="search-card"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <searchCardOne :item="item" />
        </view>
      </view>
      <LoadMore :status="status" />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { getElementHeight } from "@/utils/util";
import searchCardOne from "@/components/searchCardOne/searchCardOne.vue";
import { searchData } from "@/api/apiList";

const status = ref("noMore");

const searchType = ref("");
onLoad((option) => {
  query.search = option.key ? option.key : "";
  searchType.value = option.type ? option.type : "";
  query.type = searchType.value;
  search();
  console.log(searchType.value, "searchType.value");
});

const query = reactive({
  search: "",
  pageSize: 30,
  pageNum: 1,
  type: "",
});
const dataList = ref([]);
const search = async () => {
  dataList.value = [];
  const res = await searchData(query);
  status.value = "loading";
  if (res.code == 200) {
    if (res.rows.length) {
      dataList.value = [...dataList.value, ...res.rows];
      status.value = "noMore";
    } else {
      status.value = "noMore";
    }
  } else {
    status.value = "noMore";
  }
};

onReachBottom(() => {
  query.pageNum++;
  search();
});

onPullDownRefresh(() => {
  uni.showLoading({
    title: "加载中",
  });
  query.pageNum = 1;
  dataList.value = [];
  search();
  uni.hideLoading();
  uni.stopPullDownRefresh();
});

const searchHeight = ref(0);
onMounted(async () => {
  searchHeight.value = await getElementHeight(".search-box");
});
</script>

<style lang="scss" scoped>
.main {
  // .search-box {
  //     position: fixed;
  //     top: 0;
  //     right: 0;
  //     left: 0;
  // }

  .content {
    .result-item:last-child {
      margin-bottom: 0;
    }

    .result-item {
      margin-bottom: 20rpx;
      background-color: #fff;
      padding: 16rpx 20rpx;
      border-radius: 16rpx;

      .cover {
        flex: 1;
        margin-right: 28rpx;

        image {
          width: 110rpx;
          height: 110rpx;
          border-radius: 12rpx;
        }
      }

      .result-right {
        flex: 5;

        .title {
          font-family: PingFang SC Bold;
          font-size: 32rpx;
          font-weight: 700;
          color: #111111;
        }

        .more {
          .nummer {
            font-family: PingFang SC Bold;
            font-size: 26rpx;
            color: #777777;
          }

          image {
            width: 30rpx;
            height: 24rpx;
          }
        }
      }
    }

    .search-card:last-child {
      margin-bottom: 0;
    }

    .search-card {
      margin-bottom: 10rpx;
    }
  }
}
</style>
